<template>
    <div style="min-width:1300px;">
        <div class="tougao-middle-navi">
            <div class="chaos-tougao-navi-left">

                <div v-bind:class="{'chaos-tougao-is-selected': selectedTougaoNavigater===1 }" class="chaos-tougao-navigater" @click="clickNavigater(1)">
                    <icon name="chaos-user-centre" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">投稿</span>
                </div>

                <div v-bind:class="{'chaos-tougao-is-selected': selectedTougaoNavigater===2}" class="chaos-tougao-navigater" @click="clickNavigater(2)">
                    <icon name="chaos-user-centre" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">稿件管理</span>
                </div>

                <div v-bind:class="{'chaos-tougao-is-selected': selectedTougaoNavigater===3}" class="chaos-tougao-navigater" @click="clickNavigater(3)">
                    <icon name="chaos-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div v-bind:class="{'chaos-tougao-is-selected': selectedTougaoNavigater===4}" class="chaos-tougao-navigater" @click="clickNavigater(4)">
                    <icon name="chaos-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div v-bind:class="{'chaos-tougao-is-selected': selectedTougaoNavigater===5}" class="chaos-tougao-navigater" @click="clickNavigater(5)">
                    <icon name="chaos-setting" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">待实现功能</span>
                </div>

                <div class="choas-divider--horizontal" style="margin-top:0px !important;"></div>

                <div v-bind:class="{'chaos-tougao-is-selected': selectedTougaoNavigater===6}" class="chaos-tougao-navigater" @click="clickNavigater(6)">
                    <icon name="chaos-exit" scale="2" style="position:relative;top:3px;color:#303133;margin-left:20px;"></icon>
                    <span style="color:#303133">退出</span>
                </div>
            </div>

        </div>
        <div v-if="selectedTougaoNavigater==1">
            <div class="tougao-middle" style="padding-left:20px;">
                <div style="width:100%;min-height:40px;color:#222222;display:flex;margin-top:20px;">
                    <h1>文件上传</h1>
                    <span style="color:#666666;margin-top:10px;">
                <p>（单次最多允许上传1部视频，推荐采用mp4、flv格式，可有效缩短审核转码耗时）</p>
            </span>
                </div>
                <el-upload
                    action="#"
                    :auto-upload="false"
                    accept=".mp4"
                    :on-change="beforeFileUpload"
                    :limit="1"
                    list-type="picture">
                    <div style="margin-top:10px;">
                        <el-button size="small" type="primary"><i class="el-icon-plus"></i>添加视频</el-button>
                    </div>

                    <!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>

                <el-divider></el-divider>

                <div style="width:100%;min-height:40px;color:#222222;">
                    <h1>基本信息</h1>
                    <!--            <div style="color:#101010;margin-top:20px;display:flex;">-->
                    <!--                <h3>视频封面设置</h3>-->
                    <!--                <span style="color:#666666;margin-top:2px;">-->
                    <!--                    <p>（格式jpeg、png，文件大小≤5MB，请上传3张图片用于视频展示时的封面）</p>-->
                    <!--                </span>-->
                    <!--            </div>-->

                    <div style="color:#101010;margin-top:20px;">
                        <h3><span style="color:red;">*</span>视频封面设置</h3>
                        <span style="color:#666666;margin-top:2px;">
                    <p>（格式jpeg、png，文件大小≤5MB，请上传3张图片用于视频展示时的封面）</p>
                </span>
                    </div>

                    <div style="width:100%;float:left;margin-bottom:20px;">



                        <div style="width:25%;float:left;">
                            <el-upload style="margin:20px auto 10px 0"
                                       class="avatar-uploader"
                                       accept=".jpg,jpeg,.png"
                                       action="#"
                                       :auto-upload="false"
                                       :show-file-list="false"
                                       :on-change="function(file, fileList){ return beforeCoverImgUpload(file,1)}"
                            >
                                <img v-if="videoCoverImgUrl220x125" :src="videoCoverImgUrl220x125" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon">
                                </i>

                            </el-upload>
                            <div>(宽度220px,高度125px图片)</div>
                        </div>

                        <div style="width:25%;float:left;">
                            <el-upload style="margin:20px auto 10px 0"
                                       class="avatar-uploader"
                                       accept=".jpg,jpeg,.png"
                                       action="#"
                                       :auto-upload="false"
                                       :show-file-list="false"
                                       :on-change="function(file, fileList){ return beforeCoverImgUpload(file,2)}"
                            >
                                <img v-if="videoCoverImgUrl325x246" :src="videoCoverImgUrl325x246" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon">
                                </i>

                            </el-upload>
                            <div>(宽度325px,高度246px图片)</div>
                        </div>

                        <div style="width:33%;float:left;">
                            <el-upload style="margin:20px auto 10px 0"
                                       class="avatar-uploader_300x130"
                                       accept=".jpg,jpeg,.png"
                                       action="#"
                                       :auto-upload="false"
                                       :show-file-list="false"
                                       :on-change="function(file, fileList){ return beforeCoverImgUpload(file,3)}"
                            >
                                <img v-if="videoCoverImgUrl470x200" :src="videoCoverImgUrl470x200" class="avatar_300x130">
                                <i v-else class="el-icon-plus avatar-uploader-icon_300x130">
                                </i>

                            </el-upload>
                            <div>(宽度470px,高度200px图片)</div>
                        </div>

                        <div style="width:17%;float:left;">
                            <el-upload style="margin:70px auto 10px 0"
                                       class="avatar-uploader_80"
                                       accept=".jpg,jpeg,.png"
                                       action="#"
                                       :auto-upload="false"
                                       :show-file-list="false"
                                       :on-change="function(file, fileList){ return beforeCoverImgUpload(file,4)}"
                            >
                                <img v-if="videoCoverImgUrl80x80" :src="videoCoverImgUrl80x80" class="avatar_80">
                                <i v-else class="el-icon-plus avatar-uploader-icon_80">
                                </i>

                            </el-upload>
                            <div>(宽度80px,高度80px图片)</div>
                        </div>

                    </div>

                    <div style="color:#101010;margin-top:20px;">
                        <h3><span style="color:red;">*</span>视频分区</h3>
                        <div style="margin-top:10px;">
                            <el-cascader
                                v-model="chaosVideoForm.videoFenqu"
                                :options="options"
                                separator=" → "></el-cascader>
                        </div>
                    </div>

                    <div style="color:#101010;margin-top:20px;">
                        <h3><span style="color:red;">*</span>视频标题</h3>
                        <div style="margin-top:10px;">
                            <el-input v-model="chaosVideoForm.videoTitle"/>
                        </div>
                    </div>

                    <div style="color:#101010;margin-top:20px;">
                        <h3><span style="color:red;">*</span>视频简介</h3>
                        <div style="margin-top:10px;">
                            <el-input
                                type="textarea"
                                :rows="6"
                                v-model="chaosVideoForm.videoSummary"
                            >
                            </el-input>
                        </div>
                    </div>






                    <div style="margin-top:20px;margin-bottom:60px;">
                        <el-button type="primary" @click="doSubmit">立即投稿</el-button>
                    </div>
                </div>

            </div>

            <!--稿件投递成功的div，先隐藏掉-->
<!--            <div  class="tougao-middle" style="padding-left:10px;">-->
<!--                <div style="width:100%;min-height:40px;color:#222222;display:flex;margin:20px auto auto auto">-->
<!--                    <h1 style="margin:auto auto">稿件投递成功</h1>-->
<!--                </div>-->
<!--                <div style="width:286px;height:237px;margin:20px auto auto auto">-->
<!--                    <img src="../../assets/tougaochengong.png" height="237" width="286" style="margin:auto auto"/>-->
<!--                </div>-->
<!--                <el-divider></el-divider>-->
<!--                <div style="width:286px;height:40px;margin:auto auto">-->
<!--                    <div style="width:220px;height:40px;margin:auto auto">-->
<!--                        <el-button plain style="margin:auto auto">查看稿件</el-button>-->
<!--                        <el-button plain>再投一个</el-button>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>

        <div v-if="selectedTougaoNavigater==2" style=" width:999px;float:left;min-height:500px;border-left: 1px solid #f4f4f4;">

            <div style="width:100%;min-height:40px;color:#222222;display:flex;margin-left:20px;margin-top:20px;">
                <h1>稿件管理</h1>
            </div>


            <div style="width:800px;margin-left:20px;height:28px;margin-bottom:25px;line-height:28px;">
                <el-link :underline="false" style="margin:10px 20px 0 0" v-bind:style="{'color':naviSecondSelectIndex==0?'#409eff':''}" @click="goNaviSecond(0)">全部稿件(1)</el-link>
                <el-link :underline="false" style="margin:10px 20px 0 0" v-bind:style="{'color':naviSecondSelectIndex==1?'#409eff':''}" @click="goNaviSecond(1)">进行中(0)</el-link>
                <el-link :underline="false" style="margin:10px 20px 0 0" v-bind:style="{'color':naviSecondSelectIndex==2?'#409eff':''}" @click="goNaviSecond(2)">已通过(0)</el-link>
                <el-link :underline="false" style="margin:10px 20px 0 0" v-bind:style="{'color':naviSecondSelectIndex==3?'#409eff':''}" @click="goNaviSecond(3)">未通过(0)</el-link>
            </div>

            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">
                <tougaoShow v-if="res.length>0" :videoInfo="res[0]"></tougaoShow>
            </div>

            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">
                <tougaoShow v-if="res.length>0" :videoInfo="res[1]"></tougaoShow>
            </div>

            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">
                <tougaoShow v-if="res.length>0" :videoInfo="res[2]"></tougaoShow>
            </div>

            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">
                <tougaoShow v-if="res.length>0" :videoInfo="res[3]"></tougaoShow>
            </div>

            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">
                <tougaoShow v-if="res.length>0" :videoInfo="res[4]"></tougaoShow>
            </div>

            <div style="width:900px; height: 60px; margin: 10px auto;">
                <!--页面底部分页效果-->
                <el-pagination style="margin-right:160px;"
                               background
                               layout="total,prev, pager, next"
                               :page-size="5"
                               :total="1000">
                </el-pagination>
            </div>
        </div>

    </div>

</template>

<script>

    import tougaoShow from '@/components/tougao/tougaoShow'

    export default {
        name: "tougaoMiddle",
        components:{
            tougaoShow
        },
        data(){
            return{
                res:[],
                naviSecondSelectIndex:this.$store.getters.getNaviSecondSelectIndex,//二级导航选中的编号
                selectedTougaoNavigater:1,
                options: [{
                    value: '01-fanju',
                    label: '番剧',
                    children: [{
                        value: '01-01-lzdh',
                        label: '连载动画'
                    }, {
                        value: '01-02-wjdh',
                        label: '完结动画'
                    }, {
                        value: '01-03-zx',
                        label: '资讯'
                    }, {
                        value: '01-04-xfsjb',
                        label: '新番时间表'
                    }, {
                        value: '01-05-fjsy',
                        label: '番剧索引'
                    }]
                },{
                    value: '02-donghua',
                    label: '动画',
                    children: [{
                        value: '02-01-madamv',
                        label: 'MAD.AMV'
                    }, {
                        value: '02-02-mmd3d',
                        label: 'MMD.3D'
                    }, {
                        value: '02-03-ts',
                        label: '特摄'
                    }, {
                        value: '02-04-zh',
                        label: '综合'
                    }]
                },{
                    value: '03-yinyue',
                    label: '音乐',
                    children: [{
                        value: '03-01-ycyy',
                        label: '原创音乐'
                    }, {
                        value: '03-02-fc',
                        label: '翻唱'
                    }, {
                        value: '03-03-mv',
                        label: 'MV'
                    }, {
                        value: '03-04-yyxc',
                        label: '音乐现场'
                    }]
                },{
                    value: '04-guochuang',
                    label: '国创',
                    children: [{
                        value: '04-01-gcdh',
                        label: '国产动画'
                    }, {
                        value: '04-02-gcycxg',
                        label: '国产原创相关'
                    }, {
                        value: '04-03-zx',
                        label: '资讯'
                    }, {
                        value: '04-04-xfsjb',
                        label: '新番时间表'
                    }, {
                        value: '04-05-gcdhsy',
                        label: '国产动画索引'
                    }]
                },{
                    value: '05-wudao',
                    label: '舞蹈',
                    children: [{
                        value: '05-01-zw',
                        label: '宅舞'
                    }, {
                        value: '05-02-jw',
                        label: '街舞'
                    }, {
                        value: '05-03-mxwd',
                        label: '明星舞蹈'
                    }, {
                        value: '05-04-wdjc',
                        label: '舞蹈教程'
                    }]
                },{
                    value: '06-youxi',
                    label: '游戏',
                    children: [{
                        value: '06-01-djyx',
                        label: '单机游戏'
                    }, {
                        value: '06-02-dzjj',
                        label: '电子竞技'
                    }, {
                        value: '06-03-sjyx',
                        label: '手机游戏'
                    }, {
                        value: '06-04-wlyx',
                        label: '网络游戏'
                    }]
                },{
                    value: '07-keji',
                    label: '科技',
                    children: [{
                        value: '07-01-qwrwkx',
                        label: '趣味人文科学'
                    }, {
                        value: '07-02-ysjsxh',
                        label: '野生技术协会'
                    }, {
                        value: '07-03-yjgkk',
                        label: '演讲.公开课'
                    }]
                },{
                    value: '08-shuma',
                    label: '数码',
                    children: [{
                        value: '08-01-sjpb',
                        label: '手机平板'
                    }, {
                        value: '08-02-ddzj',
                        label: '电脑装机'
                    }, {
                        value: '08-03-sysx',
                        label: '摄影摄像'
                    }]
                },{
                    value: '09-shenghuo',
                    label: '生活',
                    children: [{
                        value: '09-01-gx',
                        label: '搞笑'
                    }, {
                        value: '09-02-rc',
                        label: '日常'
                    }, {
                        value: '09-03-sg',
                        label: '手工'
                    }, {
                        value: '09-04-hh',
                        label: '绘画'
                    }, {
                        value: '09-05-yd',
                        label: '运动'
                    }]
                },{
                    value: '10-guichu',
                    label: '鬼畜',
                    children: [{
                        value: '10-01-gctj',
                        label: '鬼畜调教'
                    }, {
                        value: '10-02-ymad',
                        label: '音MAD'
                    }, {
                        value: '10-03-jcys',
                        label: '教程演示'
                    }]
                },{
                    value: '11-shishang',
                    label: '时尚',
                    children: [{
                        value: '11-01-mz',
                        label: '美妆'
                    }, {
                        value: '11-02-fs',
                        label: '服饰'
                    }, {
                        value: '11-03-js',
                        label: '健身'
                    }, {
                        value: '11-04-tt',
                        label: 'T台'
                    }, {
                        value: '11-05-fxb',
                        label: '风向标'
                    }]
                },{
                    value: '12-guanggao',
                    label: '广告'
                },{
                    value: '13-yule',
                    label: '娱乐',
                    children: [{
                        value: '13-01-zy',
                        label: '综艺'
                    }, {
                        value: '13-02-mx',
                        label: '明星'
                    }, {
                        value: '13-03-ltac',
                        label: '芦田爱菜'
                    }]
                },{
                    value: '14-yingshi',
                    label: '影视',
                    children: [{
                        value: '14-01-yszt',
                        label: '影视杂谈'
                    }, {
                        value: '14-02-ysjj',
                        label: '影视剪辑'
                    }, {
                        value: '14-03-dp',
                        label: '短片'
                    }]
                },{
                    value: '15-dianying',
                    label: '电影'
                },{
                    value: '16-dianshiju',
                    label: '电视剧'
                },{
                    value: '17-jilupian',
                    label: '纪录片'
                }],
                videoCoverImgUrl220x125: '',//预览图1
                videoCoverImgUrl325x246: '',//预览图2
                videoCoverImgUrl470x200: '',//预览图3
                videoCoverImgUrl80x80: '',//预览图4
                chaosVideoForm:{
                    videoFile:null,
                    videoCoverImg80x80:null,
                    videoCoverImg220x125:null,
                    videoCoverImg325x246:null,
                    videoCoverImg470x200:null,
                    videoFenqu:'',
                    videoTitle:'',
                    videoSummary:''//视频简介
                }

            }
        },
        methods: {
            doSubmit(){
                var self = this;
                var chaosVideoForm = self.chaosVideoForm;
                var videoFenquParent = chaosVideoForm.videoFenqu[0];
                var videoFenquChild = chaosVideoForm.videoFenqu[1];
                var formData = new FormData();
                formData.append("videoFile",chaosVideoForm.videoFile);
                formData.append("videoCoverImg80x80",chaosVideoForm.videoCoverImg80x80);
                formData.append("videoCoverImg220x125",chaosVideoForm.videoCoverImg220x125);
                formData.append("videoCoverImg325x246",chaosVideoForm.videoCoverImg325x246);
                formData.append("videoCoverImg470x200",chaosVideoForm.videoCoverImg470x200);
                formData.append("videoFenquParent",videoFenquParent);
                formData.append("videoFenquChild",videoFenquChild);
                formData.append("videoTitle",chaosVideoForm.videoTitle);
                formData.append("videoSummary",chaosVideoForm.videoSummary);
                // formData.append('test','test');
                this.$api.post('tougaoController/tougao',formData,result=>{
                    if(result==="TOUGAO_SUCCESS"){
                        self.$notify({
                            title: '投稿成功',
                            message: '投稿成功.',
                            type: 'success',
                            position: 'bottom-right'
                        });
                    }
                });
            },
            beforeCoverImgUpload(file,index){
                //视频预览图上传前的操作
                var fileRaw = file.raw;
                var self = this;

                var tempVideoCoverImgUrl = URL.createObjectURL(fileRaw);

                if(index===1){
                    self.videoCoverImgUrl220x125 = tempVideoCoverImgUrl;
                    self._getBase64(file.raw).then(res => {
                        self.chaosVideoForm.videoCoverImg220x125 = res;
                    });
                }

                if(index===2){
                    self.videoCoverImgUrl325x246 = tempVideoCoverImgUrl;
                    self._getBase64(file.raw).then(res => {
                        self.chaosVideoForm.videoCoverImg325x246 = res;
                    });
                }


                if(index===3){
                    self.videoCoverImgUrl470x200 = tempVideoCoverImgUrl;
                    self._getBase64(file.raw).then(res => {
                        self.chaosVideoForm.videoCoverImg470x200 = res;
                    });
                }

                if(index===4){
                    self.videoCoverImgUrl80x80 = tempVideoCoverImgUrl;
                    self._getBase64(file.raw).then(res => {
                        self.chaosVideoForm.videoCoverImg80x80 = res;
                    });
                }
            },
            _getBase64(file) {
                return new Promise(function(resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = "";
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                        imgResult = reader.result;
                    };
                    reader.onerror = function(error) {
                        reject(error);
                    };
                    reader.onloadend = function() {
                        resolve(imgResult);
                    };
                });
            },
            beforeFileUpload(file){
                var self = this;
                self.$api.get('sysController/getVideoPlayerLogo',null, result => {
                    file.url = result;
                    // debugger;
                    self.userHeadImgBase64 = result;
                });

                self.chaosVideoForm.videoFile = file.raw;

                //修改上传视频的预览图片为一个播放器的图片，因为视频没有办法做预览图。
                // file.url="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
                // var self = this;
                // console.log(self.fileList)
                //debugger;
            },
            // test(){
            //     debugger;
            // },
            // handleRemove(file, fileList) {
            //     console.log(file, fileList);
            // },
            // handlePreview(file) {
            //     console.log(file);
            // },
            // handleAvatarSuccess(res, file) {
            //     this.imageUrl = URL.createObjectURL(file.raw);
            // },
            // beforeAvatarUpload(file) {
            //     const isJPG = file.type === 'image/jpeg';
            //     const isLt2M = file.size / 1024 / 1024 < 2;
            //
            //     if (!isJPG) {
            //         this.$message.error('上传头像图片只能是 JPG 格式!');
            //     }
            //     if (!isLt2M) {
            //         this.$message.error('上传头像图片大小不能超过 2MB!');
            //     }
            //     return isJPG && isLt2M;
            // }
        },
        mounted() {
            var self = this;
            self.$api.post('paihangbang/getPaihangbangTop6',null, result => {
                self.res = result;
            });
        }
    }
</script>

<style scoped>

    .tougao-middle-navi{
        /*background-color:red;*/
        float:left;
        width:200px;
        min-height:500px;
        /*border-right: 1px solid #f4f4f4;*/
        /*background-color:red;*/
        /*margin:20px auto 160px auto;*/
    }

    .tougao-middle{
        border-left: 1px solid #f4f4f4;
        width:999px;
        min-height:500px;
        /*border-left: 1px solid #f4f4f4;*/
        /*background-color:red;*/
        /*margin:20px auto 60px auto;*/
        float:left;
    }

    .avatar-uploader{
        width:220px;
        height:130px;
        margin-top:20px;
        /*background-color:red;*/
        border-radius: 4px;
        border:1px dashed #cccccc;
    }

    .avatar-uploader_80{
        width:80px;
        height:80px;
        margin-top:20px;
        /*background-color:red;*/
        border-radius: 4px;
        border:1px dashed #cccccc;
    }

    .avatar {
        width: 220px;
        height: 130px;
        display: block;
        /*background-color:red;*/
    }

    .avatar_80{
        width: 80px;
        height: 80px;
        display: block;
    }

    .avatar-uploader_300x130{
        width:300px;
        height:130px;
        margin-top:20px;
        /*background-color:red;*/
        border-radius: 4px;
        border:1px dashed #cccccc;
    }

    .avatar_300x130 {
        width: 300px;
        height: 130px;
        display: block;
        /*background-color:red;*/
    }


    /*.avatar-uploader .el-upload {*/
    /*    border: 1px dashed #d9d9d9;*/
    /*    border-radius: 6px;*/
    /*    background-color:red;*/
    /*    cursor: pointer;*/
    /*    position: relative;*/
    /*    overflow: hidden;*/
    /*}*/

    /*!*.avatar-uploader .el-upload:hover {*!*/
    /*!*    border-color: #409EFF;*!*/
    /*!*}*!*/

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 220px;
        height: 130px;
        line-height: 130px;
        text-align: center;
        /*background-color:red;*/
    }

    .avatar-uploader-icon_80 {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        /*background-color:red;*/
    }



    .avatar-uploader-icon_300x130 {
        font-size: 28px;
        color: #8c939d;
        width: 300px;
        height: 130px;
        line-height: 130px;
        text-align: center;
        /*background-color:red;*/
    }

    .chaos-tougao-navi-left{
        width:200px;
        height:800px;
        float:left;
        /*background-color:#FAFAFA;*/
    }

    .chaos-tougao-navigater{
        cursor:pointer;
        /*width:calc(100% - 40px);*/
        height:60px;
        /*margin-left:20px;*/
        line-height:60px;
    }

    .chaos-tougao-navigater:hover{
        background-color:#E1E4EA;
    }

    .chaos-tougao-is-selected{
        /*background-color:#ECF5FF;*/
        background-color:#00a1d7!important;
    }

    .chaos-tougao-is-selected > svg,.chaos-tougao-is-selected >span{
        color:#ffffff!important;
    }


</style>
